:root{
  --bg-grad-1:#0b1220; --bg-grad-2:#111b33;
  --panel:#0f172a; --panel-2:#121a2d; --line:#22314a;
  --text:#e5e7eb; --muted:#9aa4b2;
  --blue1:#5b8cff; --blue2:#7b4dff;
  --green:#22c55e; --orange:#f59e0b; --red:#ef4444;
}
.pcp-root{padding:22px;background:linear-gradient(180deg,#10203a 0%, #1a2450 100%); border-radius:18px;}
#pcp-app{max-width:1120px;margin:0 auto;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto}

/* Header */
.pcp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pcp-brand{display:flex;align-items:center;gap:10px}
.pcp-brand .icon{background:radial-gradient(circle at 0 0,#7b4dff,#1d4ed8);display:flex;align-items:center;justify-content:center}
.pcp-title{font-size:20px;font-weight:600}
.pcp-sub{font-size:12px;color:var(--muted)}
.pcp-user{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.pcp-role{padding:2px 8px;border-radius:999px;border:1px solid #475569;font-size:11px;color:#e5e7eb}

/* Toolbar */
.pcp-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pcp-search{flex:1 1 220px;min-width:0;padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:#020617;color:var(--text);font-size:13px}
.pcp-select{padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:#020617;color:var(--text);font-size:13px}
.pcp-cta{padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,var(--blue1),var(--blue2));border:none;color:white;font-size:13px;font-weight:500;cursor:pointer;box-shadow:0 0 0 1px rgba(148,163,184,.35)}
.pcp-cta:hover{filter:brightness(1.05)}

/* Cards */
.pcp-card{position:relative;display:flex;align-items:stretch;background:radial-gradient(circle at 0 0,rgba(59,130,246,0.12),transparent),#020617;border-radius:14px;margin-bottom:8px;border:1px solid rgba(30,64,175,.55);box-shadow:0 18px 45px rgba(15,23,42,.85);overflow:hidden;cursor:pointer}
.pcp-card:hover{border-color:rgba(129,140,248,.9);box-shadow:0 20px 55px rgba(30,64,175,.95);transform:translateY(-1px)}
.pcp-leftStripe{width:4px;background:linear-gradient(180deg,var(--blue1),var(--blue2))}
.pcp-card-body{flex:1;padding:10px 12px}
.pcp-id{font-size:11px;color:var(--muted);margin-bottom:2px}
.pcp-subject{font-size:14px;font-weight:500;margin-bottom:4px;color:#e5e7eb}
.pcp-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--muted);align-items:center}
.pcp-badge{padding:2px 8px;border-radius:999px;border:1px solid #1d4ed8;background:rgba(37,99,235,0.16);font-size:10px;color:#bfdbfe}
.pcp-pri{width:40px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.pcp-pri.H{background:radial-gradient(circle at 0 0,#ef4444,#7f1d1d);color:#fee2e2}
.pcp-pri.M{background:radial-gradient(circle at 0 0,#f97316,#7c2d12);color:#ffedd5}
.pcp-pri.L{background:radial-gradient(circle at 0 0,#22c55e,#14532d);color:#dcfce7}

/* Login / Auth */
.pcp-login{max-width:360px;margin:40px auto;padding:22px 20px;border-radius:18px;background:radial-gradient(circle at 0 0,rgba(96,165,250,.25),transparent),#020617;border:1px solid #1e293b;box-shadow:0 22px 40px rgba(15,23,42,.9)}
.pcp-login .icon{width:52px;height:52px;border-radius:16px;background:radial-gradient(circle at 0 0,#7b4dff,#1d4ed8);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.pcp-login h1{margin:0 0 6px;font-size:20px}
.pcp-login .sub{margin:0 0 14px;font-size:13px;color:var(--muted)}
.pcp-field{margin-bottom:10px;font-size:13px}
.pcp-field label{display:block;margin-bottom:4px;color:var(--muted);font-size:12px}
.pcp-input{width:100%;padding:8px 10px;border-radius:10px;border:1px solid #1f2937;background:#020617;color:var(--text);font-size:13px}
.pcp-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 1px rgba(59,130,246,.65)}
.pcp-btn{padding:8px 14px;border-radius:999px;border:none;background:linear-gradient(135deg,var(--blue1),var(--blue2));color:white;font-size:13px;font-weight:500;cursor:pointer}
.pcp-btn:hover{filter:brightness(1.06)}
.pcp-login .hint{margin-top:10px;font-size:12px;color:var(--muted)}
.pcp-login .hint a{color:#60a5fa;text-decoration:none}
.pcp-login .hint a:hover{text-decoration:underline}

/* Modal */
.pcp-modal{position:fixed;inset:0;background:rgba(15,23,42,.85);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:12px}
.pcp-modal > div{max-width:960px;width:100%;max-height:90vh;overflow:auto;background:radial-gradient(circle at 0 0,rgba(59,130,246,.22),transparent),#020617;border-radius:18px;border:1px solid #1f2937;box-shadow:0 30px 70px rgba(15,23,42,1);padding:14px}

/* Layout inside modal */
.pcp-row{display:grid;grid-template-columns:280px 1fr;gap:12px;margin-top:10px}
.pcp-row label.small{font-size:11px;color:var(--muted)}
.small{font-size:11px;color:var(--muted)}

/* Tabs & Chat */
.pcp-tabs{display:flex;border-radius:999px;background:#020617;border:1px solid #1e293b;overflow:hidden;font-size:12px}
.pcp-tab{flex:1;padding:6px 8px;text-align:center;cursor:pointer;color:var(--muted)}
.pcp-tab.active{background:linear-gradient(135deg,var(--blue1),var(--blue2));color:white}
#pcpTabBody{font-size:13px}
.pcp-chat{min-height:200px;max-height:340px;overflow:auto;padding:8px;border-radius:12px;border:1px solid #1f2937;background:#020617}
.pcp-send{margin-top:6px;display:flex;gap:6px}
.pcp-send textarea{flex:1;min-height:40px;max-height:80px;padding:6px 8px;border-radius:12px;border:1px solid #1f2937;background:#020617;color:var(--text);font-size:13px;resize:vertical}
.pcp-send button{padding:8px 12px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--blue1),var(--blue2));color:white;font-size:12px;font-weight:500;cursor:pointer}
.pcp-me,.pcp-other{max-width:80%;padding:6px 8px;border-radius:10px;margin-bottom:4px;font-size:12px;line-height:1.35}
.pcp-me{margin-left:auto;background:linear-gradient(135deg,#22c55e,#16a34a);color:#022c22}
.pcp-other{margin-right:auto;background:#020617;border:1px solid #1f2937}

/* Description user view */
.pcp-desc{padding:10px;border-radius:10px;border:1px solid #1f2937;background:#020617;font-size:13px}

/* Misc */
.pcp-photo-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pcp-photo-row img{border-radius:10px;border:1px solid #1f2937}
.pcp-log-row{margin-bottom:6px;padding:6px 8px;border-radius:10px;background:#020617;border:1px solid #1f2937;font-size:12px}

/* Responsive */
@media (max-width:800px){
  .pcp-row{grid-template-columns:1fr}
  .pcp-toolbar{flex-direction:column}
}